<template>
	<div class="search-view gb-inner">
		<div class="search-view_inner">
			<input v-model="searchContent" type="text" class="search-ipt" placeholder="Search for a domain name" />
			<a-button class="search-btn" type="primary" shape="circle" @click="handleSearch">
				<icon-search />
			</a-button>
		</div>
	</div>
</template>
<script setup lang="ts">
const searchContent = ref("");
const handleSearch = () => {
	console.log("search", searchContent.value);
};
</script>
<style lang="less" scoped>
.search-view {
	@apply bg-white flex w-full;
	box-sizing: border-box;
	&_inner {
		@apply w-full mx-auto overflow-hidden flex-center p-1 rounded-28px relative;
		border: 1px solid #ccc;
		max-width: 1440px;
		.search-btn {
			@apply absolute right-1;
			height: 3rem;
			width: 3rem;
		}
		.search-ipt {
			@apply border-none flex-1 rounded-28px pl-4;
			height: 3rem;
			&:focus {
				outline: none;
			}
		}
	}
}
</style>
